<template>
  <div class="inner-container">
    <!-- 查询条件 -->
    <div class="x-header">
      <span class="navTitle">日志查询</span>
      <el-divider></el-divider>
      <el-form label-width="90px" ref="formSearch" :model="formSearch">
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户名 :" prop="userId">
              <el-select
                v-model="formSearch.userId"
                style="width:100%"
                filterable
                remote
                :remote-method="fuzzyQueryUserData"
                placeholder="可模糊查询"
                :loading="userNameLoading"
              >
                <el-option
                  v-for="item in allUsersData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户端IP :" prop="clientIp">
              <el-input
                placeholder="请输入客户端IP"
                v-model="formSearch.clientIp"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="模块 :" prop="module">
              <el-input
                placeholder="请输入模块"
                v-model="formSearch.module"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="功能 :" prop="function">
              <el-input
                placeholder="请输入功能"
                v-model="formSearch.function"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起止时间 :" prop="dateTime">
              <el-date-picker
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="formSearch.dateTime"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button
              type="primary"
              style="margin-left:90px"
              icon="el-icon-search"
              @click="handleQueryData"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" @click="handleReset('formSearch')"
              >重置</el-button
            >
            <!-- <el-button type="success" icon="el-icon-download" :loading="exportLoading" @click="handleExport">导出</el-button> -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 记录列表 -->
    <div class="x-record_list">
      <div class="navTitle">日志记录</div>
      <el-divider></el-divider>
      <div class="btn_list">
        <el-button
          type="danger"
          icon="el-icon-delete"
          :disabled="mulSelectData.length == 0"
          @click="handleBatchDelete"
          >批量删除</el-button
        >
      </div>
      <el-table
        :data="tableData"
        style="width:100%;min-height:150px"
        v-loading="tableLoading"
        @selection-change="handleSelectChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          label="模块"
          prop="module"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="功能"
          prop="function"
          align="center"
        ></el-table-column>
        <el-table-column
          label="用户名"
          prop="username"
          align="center"
        ></el-table-column>
        <el-table-column
          label="客户端IP"
          prop="clientIp"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作开始时间"
          prop="operateStartTime"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作结束时间"
          prop="operateEndTime"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button> -->
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total"
          style="margin-top:20px"
          @current-change="handleChangePage"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 详情弹框 -->
  </div>
</template>

<script>
import {
  getLogData,
  fuzzyQueryUserData,
  deleteBatchLogs,
  exportLogsData
} from "@/api/project/system/log.js";
import request from "@/utils/export.js";
import config from "@/config/index.js";
import { parseUrl } from "@/utils/index.js";
export default {
  data() {
    return {
      formSearch: {
        userId: "",
        clientIp: "",
        module: "",
        function: "",
        dateTime: []
      },
      tableData: [],
      allUsersData: [],
      currentPage: 1,
      total: 0,
      tableLoading: false,
      mulSelectData: [],
      userNameLoading: false,
      exportLoading: false
    };
  },
  methods: {
    //获取初始化数据
    getInitData: function() {
      this.handleLogData();
    },
    //获取日志列表
    handleLogData: function(page) {
      let params = {
        page: page ? page : this.currentPage,
        size: 10
      };
      this.tableLoading = true;
      Object.assign(params, this.formSearch);
      params["startTime"] =
        params["dateTime"] && params["dateTime"].length
          ? params["dateTime"][0]
          : "";
      params["endTime"] =
        params["dateTime"] && params["dateTime"].length
          ? params["dateTime"][1]
          : "";
      delete params["dateTime"];
      getLogData(params).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.tableLoading = false;
      });
    },
    //查询所有用户
    fuzzyQueryUserData: function(name) {
      if (name) {
        this.userNameLoading = true;
        let params = {
          page: 1,
          size: 99,
          mobilePhone: "",
          name: name,
          state: ""
        };
        fuzzyQueryUserData(params).then(res => {
          this.userNameLoading = false;
          this.allUsersData = res.data.rows;
        });
      }
    },
    //查询
    handleQueryData: function() {
      this.handleLogData(1);
    },
    //重置
    handleReset: function(formName) {
      this.$refs[formName].resetFields();
    },
    //导出
    handleExport: function() {
      let params = JSON.parse(JSON.stringify(this.formSearch));
      params["startTime"] =
        params["dateTime"] && params["dateTime"].length
          ? params["dateTime"][0]
          : "";
      params["endTime"] =
        params["dateTime"] && params["dateTime"].length
          ? params["dateTime"][1]
          : "";
      delete params["dateTime"];
      this.exportLoading = true;
      request({
        url: "/pc/system/log/outLogs",
        method: "get",
        responseType: "blob",
        params: params
      }).then(res => {
        if (res.data) {
          let elink = document.createElement("a");
          elink.download = "日志数据.xlsx";
          elink.target = "_blank";
          elink.href = URL.createObjectURL(res.data);
          elink.click();
          this.exportLoading = false;
        } else {
          this.$message.error("导出失败！");
        }
      });
    },
    //批量删除
    handleBatchDelete: function() {
      this.$confirm("此操作将批量删除日志, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(res => {
        let ids = this.mulSelectData
          .map(item => {
            return item.id;
          })
          .join(",");
        let params = {
          ids: ids
        };
        deleteBatchLogs(params).then(res => {
          this.$message.success("操作成功！");
          this.handleLogData();
        });
      });
    },
    //单个详细
    handleDetail: function() {},
    //单个删除
    handleDelete: function(row) {
      this.$confirm("此操作将删除该条日志, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(res => {
        let params = {
          ids: row.id
        };
        deleteBatchLogs(params).then(res => {
          this.$message.success("操作成功！");
          this.handleLogData();
        });
      });
    },
    //换页查询
    handleChangePage: function(val) {
      this.handleLogData(val);
    },
    handleSelectChange: function(sections) {
      this.mulSelectData = sections;
    }
  },
  created() {
    this.getInitData();
  }
};
</script>

<style lang="scss" scoped>
.inner-container {
  padding: 20px 30px;
  background-color: #fff;
  .x-header {
    .navTitle {
      font-size: 17px;
      font-weight: bold;
      font-family: PingFangSC-Regular;
      color: rgba(72, 73, 77, 1);
      margin-bottom: 20px;
    }
  }
  .x-record_list {
    .navTitle {
      font-size: 17px;
      font-weight: bold;
      font-family: PingFangSC-Regular;
      color: rgba(72, 73, 77, 1);
      margin: 20px 0;
    }
    .btn_list {
      margin-bottom: 20px;
    }
  }
}
</style>
